<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<style>
    #box2{
        width: 200px;
        height: 10%;
        background: red;
        margin: 100px
    }
    body{
        height: 100%;
    }
    html{
        height: 100%;
    }
</style>

<body>
    <!-- 1.获取盒模型宽高.html -->
    <div style="width: 100px;height:200px;" id="box1"></div> <!-- 设置内嵌样式里 -->
    <div id="box2"></div>
</body>
<script>
    var div1 = document.getElementById("box1")
    var div2 = document.getElementById("box2")
    /* 获得宽高 */
    /* 一、 */
    console.log(div1.style.width, div1.style.height) // 100px 200px
    /* 二、 带单位px*/
    const w = window.getComputedStyle(div2) ? window.getComputedStyle(div2).width : div2.currentStyle.width
    const h = window.getComputedStyle(div2) ? window.getComputedStyle(div2).height : div2.currentStyle.height
    console.log(w,h)
    /* 三、 */
    /* 获得是数字 */
    console.log(div2.getBoundingClientRect())
    const w3 = div2.getBoundingClientRect().right - div2.getBoundingClientRect().left
    console.log("w3",w3) // box-sizing: border-box;下是 padding+content+border, 一般下是content
    console.log(div2.offsetHeight)

    // 【补充】
    /* 
        offsetWidth : 包括滚动条
        offsetHeight
        clientWidth: 不包括滚动条
        clientHeight: 
        scrollHeight: 溢出隐藏部分也算, 包括滚动条；没溢出隐藏时: clientHeight=scrollHeight
        scrollWidth
        纯数字 整数
        https://www.jianshu.com/p/76ba0d71bd7c
        https://blog.csdn.net/u010874036/article/details/50953044/
     */
     /* pageX 页面左上角开始
     clientX 可视区域左上角开始
     screenX 从屏幕左上角开始
     offsetX 鼠标相比较于触发事件的元素的位置，元素左上角, 有border的话，可能出现负值
 */
    
</script>


</html>